<template>
  <div id="custom_desc">
    <div id="mainBox">
      <div id="boxTit">
        <span class="tit"><i class="el-icon-edit-outline"></i>添加自定义数据</span>
      </div>
      <div id="customDesc">

        <div class="box">
          自定义数据名称：<el-input v-model="dataName"></el-input>
        </div>

        <el-button @click="addRow()">
          添加行
        </el-button>
        <el-button @click="addCell()">
          添加列
        </el-button>

        <table style="margin-left:42px;">
          <thead
            ref="delTab"
            v-html="delCell"
            @click="delCells($event)"
          >
          </thead>
        </table>
        <div
          ref="delTh"
          class="delTh"
          @click="delRows($event)"
        >
        </div>
        <table>
          <thead
            ref="thead"
            v-html="thstr"
          >
          </thead>

          <tbody
            v-html="str"
            ref="tbody"
          >
          </tbody>
        </table>

      </div>
      <div id="customData">
        <el-button @click="addkey()">
          新增
        </el-button>
        <div
          class="dataBox"
          v-for="(item,index) in keyvalue"
          :key="index"
        >
          <el-input v-model="item.key"></el-input>
          <el-input v-model="item.value"></el-input>
        </div>
      </div>
      <div id="dataDesc">
        <p>自定义数据描述：</p>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea"
        >
        </el-input>
      </div>

      <div class="btn">
        <el-button
          class="next"
          @click="onSubmit"
        >提交</el-button>
        <el-button
          class="back"
          @click="onBack"
        >取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { cdsSave } from "@/api/page";

export default {
  data() {
    return {
      data: {
      },
      aaa: "",
      str: "",
      thstr: "",
      delCell: "",
      delRow: "",
      dataName: "",
      textarea:"",
      form: [],
      datas: [],
      arras: {},
      keyvalue: [],
      row: 0,
      cell: 0
    };
  },
  methods: {
    addCell() {
      var cellTabth = document.createElement("th");
      var celltab = document.createElement("button");
      celltab.className = "cell-" + this.cell + "";
      cellTabth.className = "delCell";
      celltab.textContent = "删除";
      cellTabth.appendChild(celltab);
      this.$refs.delTab.appendChild(cellTabth);

      var delTabth = document.createElement("th");
      var delTabinp = document.createElement("input");
      delTabth.className = "cell-" + this.cell + "";
      delTabth.appendChild(delTabinp);
      this.$refs.thead.appendChild(delTabth);

      for (var j = 0; j < this.$refs.tbody.children.length; j++) {
        var inputObj = document.createElement("input");
        var tdObj = document.createElement("td");
        tdObj.className = "cell-" + this.cell;
        tdObj.appendChild(inputObj);

        this.$refs.tbody.children[j].appendChild(tdObj);
      }
      this.cell++;
    },
    addRow() {
      if (this.$refs.thead.children.length > 0) {
        var delThObj = document.createElement("button");
        delThObj.className = this.row;
        delThObj.textContent = "删除";
        this.$refs.delTh.appendChild(delThObj);

        var trObj = document.createElement("tr");
        this.row++;

        for (var j = 0; j < this.row; j++) {
          trObj.className = j;
        }

        for (var i = 0; i < this.$refs.thead.children.length; i++) {
          var inputObj = document.createElement("input");
          var tdObj = document.createElement("td");
          tdObj.className = "cell-" + i;

          tdObj.appendChild(inputObj);
          trObj.appendChild(tdObj);
        }

        this.$refs.tbody.appendChild(trObj);
      }
    },
    appends() {
      var arrObj = { desc: "", name: "" };
      this.form.valuesJson.push(arrObj);
    },
    closenSubjoin(index) {
      this.form.valuesJson.splice(index, 1);
    },
    handleClick(index) {
      console.log(index);
    },
    onBack() {
      this.$router.go(-1);
    },
    delCells(event) {
      if (event.target.nodeName === "BUTTON") {
        var eventClass = event.target.className;
        event.target.parentNode.remove();

        for (var i = 0; i < this.$refs.thead.children.length; i++) {
          if (this.$refs.thead.children[i].className == eventClass) {
            this.$refs.thead.children[i].remove();
          }
        }

        for (var j = 0; j < this.$refs.tbody.children.length; j++) {
          for (
            var z = 0;
            z < this.$refs.tbody.children[j].children.length;
            z++
          ) {
            if (
              this.$refs.tbody.children[j].children[z].className == eventClass
            ) {
              //   // event.target.remove();
              this.$refs.tbody.children[j].children[z].remove();
            }
          }
        }
      }
    },
    delRows(event) {
      if (event.target.nodeName === "BUTTON") {
        var eventClass = event.target.className;
        for (var i = 0; i < this.$refs.delTh.children.length; i++) {
          if (this.$refs.tbody.children[i].className == eventClass) {
            event.target.remove();
            this.$refs.tbody.children[i].remove();
          }
        }
      }
    },

    inputs(keys) {
      for (var i = 0; i < this.form.length; i++) {
        for (var key in this.form[i]) {
          if (key == this.aaa) {
            this.form[i][keys] = this.form[i][key];
            delete this.form[i][key];
          }
        }
      }
    },
    onSubmit() {
      for (var i = 0; i < this.$refs.thead.children.length; i++) {
        this.datas.push(this.$refs.thead.children[i].children[0].value);
      }
      for (var i = 0; i < this.$refs.tbody.children.length; i++) {
        var obj = {};
        for (var j = 0; j < this.$refs.tbody.children[i].children.length; j++) {
          obj[this.datas[j]] = this.$refs.tbody.children[i].children[
            j
          ].children[0].value;
        }
        this.form.push(obj);
      }
      var keyValues = {};

      for (var i = 0; i < this.keyvalue.length; i++) {
        if (this.keyvalue[i].key == undefined) {
          alert("a");
        } else {
          keyValues[this.keyvalue[i].key] = this.keyvalue[i].value;
        }
      }
      this.data.name = this.dataName
      this.data.decrypt = this.textarea
      this.data.forValuesJson = this.form
      this.data.keyValues = keyValues

      cdsSave(this.data).then(
        response =>{
          if(response.data.code == "SUCCESS"){
            this.openFullScreen();
              setTimeout(() => {
                this.loading.close();
                this.$router.push("/admin/custom");
              }, 1000);
          }
        }
      )
    },
    openFullScreen() {
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    addkey() {
      var obj = {};
      this.keyvalue.push(obj);
    },

    returns() {
      this.$router.go(-1);
    }
  },
  mounted() {
    this.data.pid = localStorage.getItem("pid");
    var keyValues = {
      // key1: "value1"
    };
    var obj = {};
    for (var key in keyValues) {
      obj.key = key;
      obj.value = keyValues[key];
    }
    this.keyvalue.push(obj);

  }
};
</script>
<style>
#custom_desc .dataBox .el-input {
  width: 20%;
}
#custom_desc #subjoin {
  height: 40px;
  width: 500px;
}
#custom_desc #subjoin .el-input {
  width: 100px;
}
#custom_desc .el-input__inner {
  padding: 0 10px;
}
#custom_desc .sub {
  position: relative;
  float: left;
  width: 150px;
  height: 40px;
  border-bottom: 1px solid #ccc;
}
#custom_desc .sub .el-input__inner {
  height: 28px;
}

#custom_desc .sub .el-button--medium {
  padding: 3px 10px;
}
#custom_desc .sub .el-button {
  width: 100px;
  height: 28px;
}

#custom_desc #tit {
  width: 530px;
  height: 30px;
}
#custom_desc #tit div {
  width: 150px;
  height: 28px;
  line-height: 28px;
  float: left;
  border-bottom: 1px solid #ccc;
}
#custom_desc #tit div span {
  margin-left: 5px;
}
#custom_desc .closenSubjoin {
  color: cornflowerblue;
  position: absolute;
  left: -30px;
  font-size: 20px;
}
#custom_desc #mainBox {
  margin-left: 15px;
  margin-top: 15px;
  width: 100%;
  border: 1px solid #623f18;
}
#custom_desc #mainBox #boxTit {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #623f18;
}
#custom_desc #mainBox #boxTit .tit {
  margin-left: 20px;
  font-size: 20px;
  color: #623f18;
  line-height: 40px;
}
#custom_desc #mainBox #boxTit .tit i {
  margin-right: 10px;
}
#custom_desc #mainBox .btn {
  text-align: center;
  border-top: 1px solid #e5e5e5;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #f5f5f5;
}
#custom_desc #mainBox .btn .el-button {
  margin-right: 30px;
}
#custom_desc .el-form {
  margin: 90px 150px;
  margin-bottom: 20px;
}
#custom_desc .next {
  background: #623f18;
  color: #fff;
}
#custom_desc .back {
  border-color: #623f18;
  color: #623f18;
}
#custom_desc #customDesc {
  width: 80%;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 25px;
  min-height: 70px;
}
#custom_desc #customDesc .box {
  margin-bottom: 20px;
}
#custom_desc #customDesc .box .el-input {
  width: 20%;
}
#custom_desc #customData {
  width: 80%;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  min-height: 70px;
}

#custom_desc .delTh {
  width: 42px;
  float: left;
  margin-top: 23px;
}
#custom_desc .delTh button {
  margin-top: 4px;
}
#custom_desc .delCell {
  width: 135px;
}
#custom_desc #dataDesc{
  width: 80%;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  min-height: 70px;
}
#custom_desc #dataDesc .el-textarea{
  width: 50%;
}
</style>
